<template>
  <div class="restaurant-detail">
    <el-container>
      <!-- 餐厅头部 -->
      <el-header class="restaurant-header">
        <el-row>
          <!-- 餐厅图片 -->
          <el-col :span="6">
            <img :src="restaurant.image" class="restaurant-image" alt="餐厅图片" />
          </el-col>
          <!-- 餐厅名称和介绍 -->
          <el-col :span="18">
            <h1 class="restaurant-name">{{ restaurant.name }}</h1>
            <p class="restaurant-description">{{ restaurant.description }}</p>
            <div class="ratings">
              <el-rate v-model="restaurant.rating" disabled></el-rate>
              <span>{{ restaurant.rating }} 分</span>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <!-- 餐厅菜品 -->
      <el-main style="margin-top: 40px;">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(dish, index) in restaurant.dishes" :key="index">
            <el-card>
              <img :src="dish.image" class="dish-image" />
              <p class="dish-name">{{ dish.name }}</p>
              <p class="dish-price">{{ dish.price }} 元</p>
            </el-card>
          </el-col>
        </el-row>

        <!-- 用户评论区 -->
        <div class="user-comments">
          <h3>用户评论</h3>
          <el-input
              type="textarea"
              placeholder="写下你的评论..."
              v-model="newComment"
              :rows="4"
          ></el-input>
          <el-button type="primary" @click="addComment">发布评论</el-button>

          <!-- 显示已发布的评论 -->
          <div class="comments-list">
            <div v-for="(comment, index) in restaurant.comments" :key="index" class="comment-item">
              <p>{{ comment }}</p>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      newComment: '',
      restaurant: {
        name: '餐厅A',
        image: '/src/assets/picture/111.jpg',  // 餐厅图片
        description: '这是一家提供美味中餐的餐厅，特色菜肴丰富多样，适合家庭聚餐和朋友聚会。',
        rating: 4.5,
        dishes: [
          { name: '菜品A', price: 30, image: '/src/assets/picture/444.jpg' },
          { name: '菜品B', price: 40, image: '/src/assets/picture/555.jpg' }
        ],
        comments: [
          '非常好吃，菜品新鲜！',
          '环境不错，服务也很好。',
          '价格有点高，但味道还行。'
        ]
      }
    };
  },
  methods: {
    addComment() {
      if (this.newComment.trim()) {
        this.restaurant.comments.push(this.newComment.trim());
        this.newComment = ''; // 清空输入框
      } else {
        this.$message.warning('评论不能为空');
      }
    }
  },
  created() {
    // 根据 id 获取餐厅信息
    // 假设从 API 获取数据
  }
};
</script>

<style scoped>
.restaurant-header {
  padding: 20px;
  display: flex;
  align-items: center;
}

.restaurant-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  margin-right: 20px;
}

.restaurant-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.restaurant-description {
  font-size: 16px;
  color: #666;
}

.ratings {
  margin-top: 10px;
  font-size: 16px;
}

.dish-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.dish-name {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.dish-price {
  font-size: 16px;
  color: #ff6347;
}

.user-comments {
  margin-top: 30px;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  padding: 10px;
  border: 1px solid #e4e7ed;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.el-input__inner {
  margin-bottom: 10px;
  resize: none;
}
</style>
